import product from "../../../../imgs/product-1.jpg";
import HttpUtils from "../../common/utils/HttpUtils";
import StorageUtils from "../../common/utils/StorageUtils";
import EventEmitterUtils from "../../common/utils/EventEmitterUtils";
import PopConfirm from "@ui/RJMart/popconfirm";
import Icon from "@ui/RJMart/icons";
import ImageWithError from "@page/common/comps/ImageWithError";
import InfoModal from '@page/common/modal/InfoModal'
import CommonUtils from "@page/common/utils/CommonUtils";


export default class CartProInfoExpire extends React.Component {
    constructor(props) {
        super(props);
        const { info } = this.props;
        this.state = {
            count: global.hasLogin ? info.amount : info.count
        };
    }

    getValues() {
        const { info } = this.props;

        if (global.hasLogin) {
            const { product, amount, id } = info;
            let {
                name,
                brandName,
                productNum,
                photo,
                specification,
                unifyPrice,
                sn,
                negotiatedPrice,
                sku
            } = product;
            return {
                name,
                brandName,
                productNum,
                photo,
                specification,
                unifyPrice,
                amount,
                sn,
                cartId: id,
                negotiatedPrice,
                sku
            };
        } else {
            let {
                count,
                productId,
                productNum,
                productName,
                productPhoto,
                productPrice,
                productSku,
                productSpec,
                sum
            } = info;
            return {
                name: productName,
                brandName: "",
                productNum: productNum,
                photo: productPhoto,
                specification: productSpec,
                unifyPrice: productPrice,
                amount: count,
                sn: productId,
                cartId: null,
                negotiatedPrice: false,
                sku: productSku
            };
        }
    }

    //关注商品
    interestProduct(sn) {
        HttpUtils.interestProduct([sn])
            .then(res => {
                this.setState({
                    modalMsg: "关注商品成功"
                });
                setTimeout(() => {
                    this.infoModal.showModal();
                }, 100);
            })
            .catch(err => {});
    }

    //删除购物车商品
    deleteShopCart(sn) {
        if (!global.hasLogin) {
            this.deleteCartLocal(sn);
            return;
        }

        HttpUtils.deleteShoppingCart([sn])
            .then(res => {
                this.emitEvents();
            })
            .catch(err => {});
    }

    emitEvents() {
        EventEmitterUtils.emit("refreshCartData", null);
        setTimeout(() => {
            EventEmitterUtils.emit("cartChoosedTotalCountChange", null);
        }, 200);
    }

    //未登录时，删除本地记录
    deleteCartLocal(productId) {
        StorageUtils.deleteCartCount(productId);
        this.emitEvents();
    }

    render() {
        const { hasBottomLine, info,suppId } = this.props;
        const { modalMsg } = this.state;
        const {
            name,
            productNum,
            photo,
            specification,
            unifyPrice,
            amount,
            sn,
            cartId,
            negotiatedPrice,
            sku
        } = this.getValues();
        return (
            <div className={"cart-pro-item-content"}>
                <div className={"cart-expire-txt"}>
                    <p>不可购买</p>
                </div>
                <ImageWithError src={photo} style={{ width: 72, height: 72 }} />
                <div
                    className={
                        hasBottomLine
                            ? "cart-content-box-info-line"
                            : "cart-content-box-info"
                    }
                >
                    <p
                        className={"cart-pro-item-content-name1"}>
                        {Filter.cutString(name,CommonUtils.getCutLength(name,48),1) }
                    </p>
                    <p className={"cart-pro-item-content-p3"}>{productNum}</p>
                    <p className={"cart-pro-item-content-p4"}>
                        {Filter.cutString(specification,20,1)}
                    </p>
                    <p className={"cart-pro-item-content-p5"}>
                        {global.hasLogin?`￥${unifyPrice.toFixed(2)}`:`登录可见`}
                        {negotiatedPrice && (
                            <div className={"cart-tejia-band1"}>
                                <p className={"cart-tejia-band1-p"}>协议价</p>
                            </div>
                        )}
                    </p>
                    <p className={"cart-pro-item-content-p6"}>{amount}</p>
                    <p className={"cart-pro-item-content-p7-expire"}>
                        {global.hasLogin?this.getTotalPrice(unifyPrice):`登录可见`}
                    </p>
                    <div className={"cart-pro-item-content-p8-expire"}>

                        <PopConfirm
                            content="确定删除商品吗?"
                            position="leftCenter"
                            icon={
                                <Icon
                                    type="exclamation-circle-fill"
                                    size="small"
                                    color="warning"
                                />
                            }
                            onConfirm={() => this.deleteShopCart(sn)}
                            onCancel={() => {
                                console.log("Cancel");
                            }}
                        >
                            <p
                                className={
                                    "cart-pro-item-content-p8-del2"
                                }
                            >
                                删除
                            </p>
                        </PopConfirm>
                    </div>
                </div>
                <InfoModal
                    getRef={v => (this.infoModal = v)}
                    content={modalMsg}
                />
            </div>
        );
    }

    getTotalPrice(unifyPrice) {
        const { count } = this.state;

        let totalPrice = (unifyPrice - 0) * count;
        return `￥${totalPrice.toFixed(2)}`;
    }
}
